<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <el-row type="flex" justify="space-between" align="middle" style="height: 40px">
          <el-col :span="20">
            <span>江苏传智播客教育科技股份有限公司</span>
          </el-col>
          <el-col :span="4">
            <el-row type="flex">
              <!-- 两个内容 -->
              <el-col :span="12">负责人</el-col>
              <el-col :span="12">
                <!-- 下拉菜单 element -->
                <el-dropdown>
                  <span>
                    操作<i class="el-icon-arrow-down" />
                  </span>
                  <!-- 下拉菜单 -->
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="addsondepartment">添加子部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 头部结束 -->
        <el-tree :data="depts">
          <template #default="scope">
            <el-row type="flex" justify="space-between" align="middle" style="height: 40px; width: 100%; ">
              <el-col :span="20">
                <span>{{ scope.data.name }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex">
                  <!-- 两个内容 -->
                  <el-col :span="12">{{ scope.data.manager }}</el-col>
                  <el-col :span="12">
                    <!-- 下拉菜单 element -->
                    <el-dropdown>
                      <span>
                        操作<i class="el-icon-arrow-down" />
                      </span>
                      <!-- 下拉菜单 -->
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="addsondepartment">添加子部门</el-dropdown-item>
                        <el-dropdown-item @click.native="addsondepartment">删除部门</el-dropdown-item>
                        <el-dropdown-item @click.native="addsondepartment">编辑部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </el-card>
    </div>
  </div>
</template>

<script>
import { departmentlistAPI } from '@/api/department'
export default {
  name: 'Departments',
  data() {
    return {
      departs: [
        {
          name: '总裁办',
          manager: '曹操',
          children: [{ name: '董事会', manager: '曹丕' }]
        },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }
      ],
      depts: [
        {
          'id': '604e115c7bfcfa45d019d3e9',
          'pid': '-1',
          'name': '传智教育',
          'code': '1',
          'introduce': '程序员的摇篮',
          'createTime': '2022-04-29 12:35:54'
        },
        {
          'id': '604e21feb205b95968e13129',
          'pid': '',
          'name': '总裁办22',
          'code': '1001',
          'manager': '管理员',
          'introduce': '公司战略部',
          'createTime': '2021-03-14 22:47:25'
        },
        {
          'id': '604e222bb205b95968e1312a',
          'pid': '',
          'name': '行政部',
          'code': 'XZB',
          'manager': '管理员',
          'introduce': '行政部',
          'createTime': '2021-03-14 22:47:25'
        },
        {
          'id': '604e223fb205b95968e1312b',
          'pid': '',
          'name': '人事部',
          'code': 'RSB',
          'manager': '管理员',
          'introduce': '人事部',
          'createTime': '2021-03-14 22:47:25'
        },
        {
          'id': '604e2251b205b95968e1312c',
          'pid': '',
          'name': '财务部',
          'code': 'CWB',
          'manager': '管理员',
          'introduce': '财务部',
          'createTime': '2021-03-14 22:47:25'
        },
        {
          'id': '604e2262b205b95968e1312d',
          'pid': '604e2251b205b95968e1312c',
          'name': '财务核算部',
          'code': 'CWHSB',
          'manager': '管理员',
          'introduce': '财务核算部',
          'createTime': '2021-03-14 22:47:25'
        },
        {
          'id': '604e227db205b95968e1312e',
          'pid': '604e2251b205b95968e1312c',
          'name': '税务管理部',
          'code': 'SWGLN',
          'manager': '管理员',
          'introduce': '税务管理部',
          'createTime': '2021-03-14 22:47:25'
        },
        {
          'id': '604e2297b205b95968e1312f',
          'pid': '604e2251b205b95968e1312c',
          'name': '薪资管理部',
          'code': 'XZGLB',
          'manager': '管理员',
          'introduce': '薪资管理部',
          'createTime': '2021-03-14 22:47:25'
        },
        {
          'id': '6051ad90e93db6522c1d00d2',
          'pid': '',
          'name': '技术部',
          'code': 'JSB',
          'manager': '孙财',
          'introduce': '技术部',
          'createTime': '2021-03-17 15:18:23'
        },
        {
          'id': '6051adb6e93db6522c1d00d3',
          'pid': '6051ad90e93db6522c1d00d2',
          'name': 'Java研发部',
          'code': 'JYFB',
          'manager': '管理员',
          'introduce': 'JAVA研发部',
          'createTime': '2021-03-17 15:18:23'
        },
        {
          'id': '6051add6e93db6522c1d00d4',
          'pid': '6051ad90e93db6522c1d00d2',
          'name': 'Python研发部',
          'code': 'PYFB',
          'manager': '罗晓晓',
          'introduce': 'Python研发部',
          'createTime': '2021-03-17 15:18:23'
        },
        {
          'id': '6051adefe93db6522c1d00d5',
          'pid': '6051ad90e93db6522c1d00d2',
          'name': 'Php研发部',
          'code': 'PhpYFB',
          'manager': '孙财',
          'introduce': 'Php研发部',
          'createTime': '2021-03-17 15:18:23'
        },
        {
          'id': '6051ae03e93db6522c1d00d6',
          'pid': '',
          'name': '运营部',
          'code': 'YYB',
          'manager': '孙财',
          'introduce': '运营部',
          'createTime': '2021-03-17 15:18:23'
        },
        {
          'id': '6051ae15e93db6522c1d00d7',
          'pid': '',
          'name': '市场部',
          'code': 'SCB',
          'manager': '孙财',
          'introduce': '市场部',
          'createTime': '2021-03-17 15:18:23'
        },
        {
          'id': '6051ae28e93db6522c1d00d8',
          'pid': '6051ae15e93db6522c1d00d7',
          'name': '北京事业部',
          'code': 'BJSYB',
          'manager': '孙财',
          'introduce': 'BJSYB',
          'createTime': '2021-03-17 15:18:23'
        },
        {
          'id': '6051ae3de93db6522c1d00d9',
          'pid': '6051ae15e93db6522c1d00d7',
          'name': '上海事业部',
          'code': 'SHSYB',
          'manager': '文吉星',
          'introduce': '上海事业部',
          'createTime': '2021-03-17 15:18:23'
        },
        {
          'id': '62a5b8dfb7aa47052428b8f6',
          'pid': '父级部门id',
          'name': '部门名称',
          'code': '1002',
          'manager': '部门负责人名称',
          'introduce': '部门介绍',
          'createTime': '2022-04-29 12:35:54'
        },
        {
          'id': '62a5be09b7aa47052428b900',
          'pid': '父级部门id',
          'name': '部门名称',
          'code': '10011',
          'manager': '部门负责人名称',
          'introduce': '部门介绍',
          'createTime': '2022-04-29 12:35:54'
        }
      ]
    }
  },
  created() {
    this.departmentlist()
  },
  methods: {
    addsondepartment() {
      console.log(123)
    },
    async departmentlist() {
      const res = await departmentlistAPI()
      console.log(res)
    }
  }
}
</script>

<style scoped lang="scss">
.tree-card {
  padding: 30px 30px;
  font-size:14px;
}
</style>
